<template>
    <div class="topCountent">
         <p  class="centers">
             <img src="../assets/images/skill-name-left.png" alt=""  class="left-img"/>
             <span style = "font-size:24px;font-weight: bold;">&nbsp;&nbsp;&nbsp;{{title}}&nbsp;&nbsp;&nbsp;</span>
             <img src="../assets/images/skill-name-rigth.png" alt=""  class="right-img"/>
        </p>
        <div class="content" >
            <div class="fl" style = "font-size:14px;font-weight: bold;margin-left: 15px;">岗位职责：</div>
            <div v-if="list[0].length > 0">
                <div class="fl content-name" v-if="show">{{ (list[0] || '').slice(0,62)}}<span class="more" v-if="show && num " @click="more" >...查看更多</span></div>
                <div class="fl content-name" v-else>{{list[0]}}<span  class="more" @click="more"  v-if="!show && num">&nbsp;收起</span></div>
            </div>
            <div v-else style="font-size:14px">无</div>
            <!-- <div class="more" @click="more" v-if="show && num ">...查看更多</div> -->
        </div>
        <i class="iconfont icon-icon_edit" @click="modify" v-if = " roleId == 'TEACHER' || roleId == 'MARKET_TEACHER' ||  roleId == 'UNIVERSITY_TEACHER'"></i>
        <el-dialog :close-on-click-modal="false"  title="岗位职责编辑" :visible.sync="dialogVisible" width="680px" >
            <el-input
                type="textarea"
                placeholder="请输入岗位职责内容"
                v-model="contentTitle"
                maxlength="500"
                show-word-limit
             >
             </el-input>
             <div class="save">
                <el-button class="button-style" @click="saves" style="width:90px">保 存</el-button>
                <el-button class="button-style" @click="dialogVisible = false" style = "width:90px">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        props:['title','list'],
        data() {
            return {
                //角色
			    roleId:'',
                // list:[],
                // title:''
                show:true,
                dialogVisible:false,
                contentTitle:'',
                num:'',
            }
        },
        created () {
            // 角色
            this.roleId = this.$store.state.user.roles[0]
            if(this.list[0]){
                 this.list[0].length > 62? this.num = true : this.num = false
            }
        },
        watch: {
            list(val){
                this.list = val;
                this.list[0].length > 62? this.num = true : this.num = false
            },
            title(val){
                this.title = val;
            },
        },
        methods:{
            more(){
                this.show = !this.show
            },
            modify(){
                this.dialogVisible  = true
                this.contentTitle = this.list[0]
            },
            // //点击取消
            // deleteAll(){
            //     this.contentTitle = this.list[0]
            // },
            saves(){
                let self = this
                if(this.contentTitle == ''){
                    self.$message({
                        message: '内容不能为空',
                        type: 'warning'
                    })
                    return
                }
                self.$http.get(`/tes/course/updateSkillInfo?skillId=${self.list[1]}&name=${self.contentTitle}`
                  ).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        self.dialogVisible  = false
                        self.contentTitle.length > 62? this.num = true :this.num = false
                        //console.log( self.contentTitle.length,8888)
                        self.$emit('closed',self.contentTitle)
                    }else{
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>
<style scoped>
.el-textarea>>>.el-textarea__inner{
    resize: none
}
</style>
<style lang="scss" scoped>
.topCountent{
    width: 1200px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0px 6px rgba(0,0,0,0.05);
    box-shadow: 0 0px 6px rgba(0,0,0,0.05);
    background: #fff;
    border-radius: 5px;
    padding: 30px 40px;
    margin: 20px auto 20px;
    color: #474747;
    line-height: 30px;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    clear: both;
    .centers{
        text-align: center;
        font-size: 25px;
        color: #000;
        position: relative;
    }
    .el-textarea{
        height: 280px;
    }
    .content{
        padding:20px 50px 10px 50px;
        color: #474747;
        font-size: 16px;
        .content-name{
            width: 935px;
            word-break: break-word;
            font-size: 14px;
        }
    }
    .fl{
        float: left;
    }
    .more{
        cursor: pointer;
        color: #385899;
    }
    .more:hover{
        color: #1277eb;
    }
    .icon-icon_edit{
        position: absolute;
        right: 44px;
        bottom:2px;
        cursor: pointer;
        font-size:18px;
        &:hover{
            color: #1277eb;
        }
    }
    .save{
        margin: 0px auto;
        width: 200px;
        clear: both;
        margin-top: 20px;
    }
    // .el-textarea .el-input__count{
    //     background: red;
    // }
}
</style>
<style>
    /* 防止字符超出时，如（标点符号）显示出字数的背景覆盖到横向滚动条，So —— */
    .el-textarea .el-input__count {
        background: none;
    }
</style>
